/**
 * Author: Shen Yanqiu
 * Date: 2017-12-06
 * Time: 15:10
 *
 */
import React from 'react';
import { Form, Input, Button, message, Upload, Icon, Modal } from 'antd';

const FormItem = Form.Item;
class AddPage extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [],
  };

  handleCancel = () => this.setState({ previewVisible: false })

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }

  handleChange = ({ fileList }) => {
    this.setState({ fileList })
    console.log(fileList);
  }
  render () {
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched, validateFields } = this.props.form;
    const { onSubmit } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
    };
    const UpdateImageLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    function handleSubmit (e) {
      e.preventDefault();
      validateFields((err, values) => {
        // 提交数据
        onSubmit(values);
        // console.log('Received values of form: ', values);
      });
    }
    // 图片上传
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    // 附件
    const uploadfilesprops = {
      name: 'file',
      action: '//jsonplaceholder.typicode.com/posts/',
      headers: {
        authorization: 'authorization-text',
      },
      onChange (info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    };
    return (
      <div>
        <h2>添加申请</h2>
        <Form layout="horizontal" onSubmit={handleSubmit}>
          <FormItem label="申请目的" {...formItemLayout}>
            {getFieldDecorator('forpurpose', {
              rules: [{ message: '输入不为空!' }],
            })(<Input type="textarea" placeholder="请输入申请目的（30个字）" rows="2" />)}
          </FormItem>

          <FormItem label="申请费用" {...formItemLayout}>
            {getFieldDecorator('cost', {
              rules: [{ message: '输入不为空!' }],
            })(<Input type="number" placeholder={"请输入金额"} />)}
          </FormItem>
          <FormItem label="图片" {...UpdateImageLayout}>
            {/* 上传图片 */}
            <div className="clearfix">
              <Upload
                action="//jsonplaceholder.typicode.com/posts/"
                listType="picture-card"
                fileList={fileList}
                onPreview={this.handlePreview}
                onChange={this.handleChange}
              >
                {fileList.length >= 4 ? null : uploadButton}
              </Upload>
              <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                <img alt="example" style={{ width: '100%' }} src={previewImage} />
              </Modal>
            </div>

          </FormItem>

          <FormItem label="附件" {...UpdateImageLayout}>
            <Upload {...uploadfilesprops}>
              <Button>
                <Icon type="upload" /> Click to Upload
              </Button>
            </Upload>
          </FormItem>
          <FormItem>
            <Button type="primary" htmlType="submit">提交</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}
export default Form.create()(AddPage);
